
<template>
    <div  class="loop-line Sys-content-box">
        <!--添加一级区域-->
        <button class="add-btn" @click="addBuild"><span class="iconfont">+</span>新增建筑类型</button>
        <div class="table-box">
                <el-table
                        :data="tableData"
                        border
                        style="width: 50%">
                    <el-table-column
                            prop="building_type_sort"
                            label="排序"
                            width="80"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="building_type_name"
                            label="类型"

                    >
                    </el-table-column>

                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="editBuild(scope.row)" type="text" size="small">编辑</el-button>  <!--添加2级区域-->
                            <el-button type="text" size="small" @click="deleteBuild(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <!--添加-->
                <SysBuildAddForm
                        class="addForm"
                        :form="formData"
                        :title="addDialogTitle"
                        v-if="addFormVisible"
                        :drawUrl="nowUrl"
                        @onclose="closeadddia(arguments)"
                >
                </SysBuildAddForm>
        </div>
        <p class="total-size">总计<span>{{totalSize}}</span>条记录</p>

        <!--分页-->
        <el-pagination

                :page-size="pageSize"
                @current-change="fenye"
                layout="prev, pager, next"
                :page-count="pageCount"
        >
        </el-pagination>
        <!--删除组件-->
        <SysConfigDel
                :form="delItem"
                :title="delDialogTitle"
                :visible="delFormVisile"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                @onclose="closedeldia(arguments)"
        >
        </SysConfigDel>
    </div>
</template>
<script>
    /*添加弹框引入*/
    import SysBuildAddForm  from '../components/SysBulidAddForm'
    import SysConfigDel  from '../components/SysConfigDel'


    export default {
        name: "SysBuildPage",
        components:{
            SysBuildAddForm,
            SysConfigDel
        },
            props:['configtype'],
        data() {
            return {
                totalSize:0,
//添加pageSize
                pageSize:10,
                formData:{},
                /*添加弹框的数据*/
                addFormVisible: false,
                selectAreaData: {},


                /*区域表格数据接受后端返回的已分页*/
                tableData:[],
                pageCount:1,
                //当前页
                currentPage:1,
                //添加/修改
                addDialogTitle: "",

                dialogTitleMap: {
                    addBuildTitle: "添加建筑",
                    editBuildTitle: "修改建筑",
                },
//删除组件
                delDialogTitle: "建筑",
              
                //是否显示删除标签的图标
                deltagvisible:false,
                delFormVisile:false,
                delItem:{},
                nowUrl:{ geturl:'/building_type/queryBuildingType',
                    delurl:'/building_type/delBuildingType',
                    addurl:'/building_type/addBuildingType',
                    editurl:'/building_type/updateBuildingType',
                }
            };
        },
        methods: {
            //添加环线
            addBuild() {
                this.addDialogTitle = this.dialogTitleMap.addBuildTitle;
                this.addFormVisible = true;
                this.formData = {
                    building_type_name:'',
                    building_type_sort:0,

                };
            },
            //删除

            deleteBuild(item) {
           
                //删除区
                this.delFormVisile = true;
                this.delItem = { ...item };
            },
            closedeldia(e) {
                if (e[0]) {
                    //重新获取区块信息
                    this.getBuildData()
                } else {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                }
                this.delFormVisile = false;
            },
            //打开删除标签
            //删除标签
//编辑
            editBuild(item){
                this.addDialogTitle = this.dialogTitleMap.editBuildTitle;
                this.addFormVisible = true;
                this.formData = {
                    ...item
                };
            },
            //分页
            fenye(val){
                this.currentPage=val
                this.getBuildData()
            },
            closeadddia(e){

                this.addFormVisible=false
                if (!e[0]){
                    this.$message({
                        type:'info',
                        message:'取消操作'
                    })
                }else {
                     this.getBuildData()
                }

            },
            getBuildData(){
                this.axios({
                    url:this.nowUrl.geturl,
                    method:'get',
                    params:{limit:this.pageSize,page:this.currentPage}
                }).then(data=>{
                    // console.log('获取全部建筑数据')
                    // console.log(data)
                    this.tableData=data.data.dataList
                    this.pageCount=data.data.totalPage
                    this.totalSize=data.data.totalSize
                })
            },

        },
        created() {
           this.getBuildData()
        }

    }
</script>

<style lang="less">
    .loop-line{

        .table-box{
            width: 100%;
            position: relative;
        }

    }

</style>